import { getHomehrjobsUserId } from "@/apis/endpoint/home";
import { HomeJobListResult } from "@/apis/endpoint/model";
import GpContainer from "@/components/GpContainer";
import GpNavbar from "@/components/GpNavbar";
import { useNavigationOpacity } from "@/hooks/useNavigationOpacity";
import { getSalaryText } from "@/utils/app";
import { Image, Text, View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";

interface RouteParams {
  id: string
  [key: string]: string
}

export default function Index() {
  const params = useRouter<RouteParams>().params
  const [opacity] = useNavigationOpacity()
  const [list, setList] = useState<HomeJobListResult[]>([])
  useEffect(() => {
    getHomehrjobsUserId(Number(params.id))
    .send()
    .then(setList)
  }, [])
  return (
    <GpContainer className="bg-[#F4F6FC]">
      <GpNavbar
        navigationBarTitleText={null}
        navigationBarBackgroundColor={`rgba(255, 255, 255, ${opacity})`}
        placeholderClassName="bg-transparent"
      />
      <View className="h-[400px] box-border bg-linear-180 from-0% from-[#9DC4FF] to-100% to-[#9DC4FF]/0 fixed left-0 top-0 right-0"></View>
      <View className="flex flex-row items-center gap-[32px] px-[32px] mt-[16px] relative z-10">
        <Image src={list[0]?.publishUserAvatar ?? __DEF_AVATAR__} className="size-[128px] rounded-[50%] object-cover" />
        <View className="flex flex-col gap-[20px]">
          <Text className="text-primary text-[40px] leading-[40px]">
            {list[0]?.publishUserName}
          </Text>
          <Text className="text-third text-[28px] leading-[28px]">
            招聘主管 · {list[0]?.companyName}
          </Text>
        </View>
      </View>
      <View className="text-primary text-[32px] leading-[32px] font-bold mt-[42px] px-[40px] relative z-10">
        在招职位<Text className="text-secondary font-normal pl-[8px]">{list.length}</Text>
      </View>
      <View className="p-[32px]">
        <View className="bg-white rounded-[24px] shadow-[0_0_32px_rgba(46,41,77,0.04)] px-[24px]">
          {
            list.map(item => (
              <View key={item.id} className="py-[48px] border-b-[2px] border-solid border-b-[#EEEEEE] last:border-none">
                <View className="flex flex-row justify-between items-center box-border">
                  <View className="truncate flex-1 w-0 text-primary text-[36px] leading-[36px] font-medium">
                    {item.name}
                  </View>
                  <View className="flex-none text-theme text-[28px] leading-[28px] font-medium">
                    {getSalaryText(item)}
                  </View>
                </View>
                <View className="mt-[20px] flex flex-row flex-nowrap items-center gap-[8px]">
                  <View className="h-[48px] leading-[48px] rounded-[8px] bg-[#F4F6FC] px-[16px] text-[26px] text-secondary">
                    {item.jobAddress?.regionName}
                  </View>
                  <View className="h-[48px] leading-[48px] rounded-[8px] bg-[#F4F6FC] px-[16px] text-[26px] text-secondary">
                    {item.experienceDisplay}
                  </View>
                  <View className="h-[48px] leading-[48px] rounded-[8px] bg-[#F4F6FC] px-[16px] text-[26px] text-secondary">
                    {item.educationDisplay}
                  </View>
                  <View className="h-[48px] leading-[48px] rounded-[8px] bg-[#F4F6FC] px-[16px] text-[26px] text-secondary">
                    {item.workModeJson?.name}
                  </View>
                </View>
              </View>
            ))
          }
        </View>
      </View>
    </GpContainer>
  )
}
